import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import { LinkContainer } from "react-router-bootstrap"

import Classes from './components/Classes.jsx'
import Dishes from './components/Dishes.jsx'
import Orders from './components/Orders.jsx'
import Index from './components/Index.jsx'

let isshow = "none"
let display = { display: "block" }
class App extends Component {
  state={
    toggle:true
  }
  hideview=()=>{
    this.setState({ toggle: !this.state.toggle})
    display = this.state.toggle ? { display: "none" } : { display: "block" }
  }

  render() {
    
    return (
      <Router>
        <div className="wrapper skin-red">
          {/* header */}
          <header className="main-header">
            <LinkContainer exact to="/">
              <a href="javascript:;" className="logo">
                <span className="logo-lg">ED订餐管理系统</span>
              </a>
            </LinkContainer>
            <nav className="navbar navbar-static-top">
              <a href="javascript:;" className="sidebar-toggle" >
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </a>
            </nav>
          </header>

          {/* aside */}
          <aside className="main-sidebar">
            <section className="sidebar">
              <ul className="sidebar-menu" >

                <li className={this.state.toggle ? "treeview active" :"treeview active menu-open" } >
                  <a onClick={this.hideview}   href="javascript:;">
                    <i className="fa fa-book"></i>
                    <span>菜单</span>
                  </a>
                  <ul className="treeview-menu" style={display}>
                    <LinkContainer to="/classes">
                      <li>
                        <a href="javascript:;">
                          <i className="fa fa-circle-o"></i>
                          <span>类别管理</span>
                        </a>
                      </li>
                    </LinkContainer>
                    <LinkContainer to="/dishes">
                      <li>
                        <a href="javascript:;">
                          <i className="fa fa-circle-o"></i>
                          <span>菜品管理</span>
                        </a>
                      </li>
                    </LinkContainer>
                    <LinkContainer to="/orders">
                      <li>
                        <a href="javascript:;">
                          <i className="fa fa-circle-o"></i>
                          <span>订单管理</span>
                        </a>
                      </li>
                    </LinkContainer>
                  </ul>
                </li>
                <li className="treeview">
                  <a href="javascript:;">
                    <span>备用</span>
                  </a>
                </li>
                <li className="treeview">
                  <a href="javascript:;">
                    <span>备用</span>
                  </a>
                </li>

              </ul>
            </section>
            侧边栏
        </aside>

          <div className="content-wrapper" >
            <Route exact path="/" component={Index}></Route>
            <Route path="/classes" component={Classes}></Route>
            <Route path="/orders" component={Orders}></Route>
            <Route path="/dishes" component={Dishes}></Route>
          </div>

          <footer className="main-footer">
            <div className="pull-right hidden-xs">
              Anything you want
          </div>
            <strong>Copyright &copy; 2016 <a href="">Company</a>.</strong> All rights reserved.
        </footer>
        </div>
      </Router>
    )
  }
}

export default App;
